<%layout("/eova/layout/list.html",{'title' : object.name + I18N('列表')}){
// 计算子高度
var SH = config.params.slave_height!300;
%>

<div class="eova-layout" style="width: calc(100% - 20px); height: calc(100% - 20px); margin: 10px;">
	<div class="zone" style="width: 100%; height: 100%;">
		<div class="box" style="height: 43px;">
		
			<#query id="queryForm" objectCode="${object.code}" />
			
		</div>

		<div class="zone" style="height: calc(100% - 10px - 43px); top: calc(43px + 10px)">
<!-- 			<div class="box" style="height: calc(100% - ${SH + 50}px - 10px);"> -->
<!-- 			</div> -->
			<div class="box" style="width:calc(100% - 10px - 700px);">
				<%include("/eova/template/common/toolbar.html",{id: 'master_grid_toolbar', 'parentId': 'master_grid', 'queryId': 'queryForm', 'btnList': btnMap[0]}){}%>
				
				<#table id="master_grid" toolbar="master_grid_toolbar" objectCode="${config.objectCode}" menuCode="${menu.code}" isFirstLoad="true" />
			</div>
			
			<div class="box" style="width:700px;left: calc(100% - 700px)">
				<div class="layui-tab layui-tab-card" lay-filter="tabs" style="height: 100%">
						<ul class="layui-tab-title">
							<%for(x in objects){%>
							<li lay-id="${xLP.index}" class="${xLP.first ? 'layui-this' : ''}">${x.name}</li>
							<%}%>
						</ul>
						<div class="layui-tab-content" style="height: calc(100% - 42px)">
							<%for(var i=0;i<objects.~size;i++){%>
			        		<%var x = objects[i];%>
			                <div class="layui-tab-item ${i == 0 ? 'layui-show' : ''}" style="height: 100%">
								
								<div class="layui-btn-container" id="${x.code}_toolbar" style="display: none;">
								<%if(!isEmpty(btnMap[i+1]!)){// 有按钮授权才显示%>
		                            <%for(btn in btnMap[i+1]){%>
									<%include(btn.ui,{'object':x, 'gridId': x.code + '_grid', 'parentId': 'master_grid', config : config, 'field' : config.fields[i] , 'button':btn }){}%>
		                            <%}%>
		                        <%}%>
								</div>
								<#table id="${x.code}_grid" pid="master_grid" toolbar="${x.code}_toolbar" objectCode="${x.code}" isFirstLoad="false" isPaging="false"/>
							</div>
				        	<%}%>
						</div>
					</div>
			</div>
<!-- 			<div class="box" style="height: ${SH + 50}px; top: calc(100% - ${SH + 50}px)"> -->
<!-- 			</div> -->
		</div>
	</div>
</div>
<script>
var masterSelectRow;

// 主表选中行事件回调
function master_gridSelect(o){
	layui.use(['table', 'element'], function() {
		var $ = layui.$,
		table = layui.table,
		element = layui.element;
		
		// 主表行选中后自动切换到第一个子Tab
		var ID = '${config.objects[0]}_grid';
		element.tabChange('tabs', 1);
	  	table.reload(ID, {
			where : {
	       		${'query_' + config.fields[0]} : o.data.${config.objectField}
			}
		});
		
		// 记录主选中数据
	  	masterSelectRow = o.data;
	
	});
}

layui.use(['table', 'element'], function() {
	var $ = layui.$,
	table = layui.table,
	element = layui.element;

// 	var masterSelectRow;
	
// // 	table.on('radio(master_grid)', function(o){
// // 		masterSelect(o);
// // 	});
// // 	table.on('checkbox(master_grid)', function(o){
// // 		masterSelect(o);
// // 	});
	
// 	table.on('row(master_grid)', function(obj) {
// 		masterSelect(obj);
// 	});
		
	
	// 主表行单击后自动切换到第一个子Tab
// 	function masterSelect(o){
// 		var ID = '${config.objects[0]}_grid';
// 		element.tabChange('tabs', 1);
// 	  	table.reload(ID, {
// 			where : {
// 	       		${'query_' + config.fields[0]} : o.data.${config.objectField}
// 			}
// 		});
		
// 		// 记录主选中数据
// 	  	masterSelectRow = o.data;
// 	}
	
	// 子选项卡切换
	element.on('tab(tabs)', function(o){
		<%for(x in objects){%>
		if(o.index == ${xLP.index-1}){
			if(masterSelectRow){
			  	table.reload('${x.code}_grid', {
					where : {
			       		${'query_' + config.fields[xLP.index-1]} : masterSelectRow.${config.objectField}
					}
				});
			}
		}
		<%}%>
	});
	
});

</script>

<%if(!isEmpty(menu.diy_js!)){%>
<script type="text/javascript" src="${menu.diy_js}?v=${VER!}"></script>
<%}%> <%if(!isEmpty(object.diy_js!)){%>
<script type="text/javascript" src="${object.diy_js}?v=${VER!}"></script>
<%}%> <%}%>
